<template>
  <div>
    <Modal
      width="50"
      style="position: absolute"
      v-model="ModalSwitch"
      title="回复帖子(点击空白处开始编辑)"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <div
        ref="msgDiv"
        style="height: auto; min-height: 500px"
        contenteditable="true"
        v-html="ModalContent"
      >
        这里可以编辑
      </div>
      <!-- <Input
        v-model="ModalContent"
        type="textarea"
        :rows="4"
        placeholder="请输入回复的内容..."
      /> -->
    </Modal>
    <div class="posting-menu">
      <div class="posting-menu-button-box">
        <Button class="posting-menu-button" @click="goToPublish" type="primary"
          >发帖</Button
        >
        <Button class="posting-menu-button" @click="goToReply" type="primary"
          >回复</Button
        >
      </div>
      <span @click="collect" v-show="!isCollect"
        ><Icon size="25" type="md-radio-button-off" />点击收藏</span
      >
      <span @click="cancelCollect" v-show="isCollect">
        <Icon
          size="25"
          v-show="isCollect"
          type="ios-radio-button-on"
        />取消收藏</span
      >
      <Page
        class="posting-menu-page"
        :total="count"
        @on-change="change_page"
        :page-size="5"
        show-total
        :current="currentPage"
      />
    </div>
    <div class="posting-topic" style="text-align: left">
      <span>帖子主题：</span>
      <span> {{ topicInformation.postingName }}</span>
    </div>
    <div class="posting-topic" style="text-align: left">
      <span>所在版块：</span>
      <span> {{ topicInformation.boardName }}</span>
    </div>
    <div class="posting-box" v-show="currentPage == 1">
      <div class="posting-userinfo">
        <div class="posting-nickName">
          {{
            topicInformation.nickName + '(' + topicInformation.username + ')'
          }}
        </div>
        <img
          class="posting-img"
          :src="
            topicInformation.headImage
              ? topicInformation.headImage
              : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607360962331&di=1218a8d293786b5dcf1d8e96085fb10e&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-6afa72220d29f045c15217aa6b275808_hd.jpg'
          "
        />
        <div style="text-align: left; padding-left: 20px">
          年龄: {{ topicInformation.age }}岁
        </div>
      </div>
      <div class="posting-content">
        <div class="posting-date">
          发表于:{{ topicInformation.createDate }}
          <span style="float: right">楼主</span>
        </div>
        <pre
          style="
            white-space: pre-wrap;
            word-wrap: break-word;
            padding-left: 20px;
          "
          v-html="topicInformation.firstContent"
        ></pre>
      </div>
    </div>

    <div class="posting-box" v-for="item in reply" :key="item.replyId">
      <div class="posting-userinfo">
        <div class="posting-nickName">
          {{ item.nickName + '(' + item.username + ')' }}
        </div>
        <img
          class="posting-img"
          :src="
            topicInformation.headImage
              ? topicInformation.headImage
              : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607360962331&di=1218a8d293786b5dcf1d8e96085fb10e&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-6afa72220d29f045c15217aa6b275808_hd.jpg'
          "
        />
        <div style="text-align: left; padding-left: 20px">
          年龄:{{ topicInformation.age }}岁
        </div>
      </div>
      <div class="posting-content">
        <div class="posting-date">
          发表于:{{ item.replyDate }}
          <span style="float: right">{{ item.floor }}楼</span>
        </div>
        <pre
          style="
            white-space: pre-wrap;
            word-wrap: break-word;
            padding-left: 20px;
          "
          v-html="item.replyContent"
        ></pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Posting',
  data () {
    return {
      ajaxResult: '',
      ajaxResultRowCount: 0,
      count: 0,
      topicInformation: {},
      reply: {},
      currentPage: 1,
      ModalSwitch: false,
      ModalContent: '',
      isCollect: false
    }
  },
  methods: {
    getClipboardFiles (event) {
      let items = event.clipboardData && event.clipboardData.items
      let file = null
      if (items && items.length) {
        // 检索剪切板items
        for (var i = 0; i < items.length; i++) {
          if (items[i].type.indexOf('image') !== -1) {
            file = items[i].getAsFile()
          }
        }
      }
      if (!file) {
        console.log('复制的不是图片')
        return
      }
      var that = this
      var formData = new FormData()
      formData.append('file', file)
      this.$axios({
        method: 'post',
        url: 'uploadImageReply',
        data: formData
      })
        .then(function (response) {
          console.log(response)
          // 模拟异步 否则获取不到渲染后的dom。试了好几冲方法都不行
          setTimeout(function () {
            let imgs = that.$refs.msgDiv.getElementsByTagName('img')
            let reg = new RegExp('(?=data:image/png;base64,)')
            for (let i = 0; i < imgs.length; i++) {
              if (reg.test(imgs[i].src)) {
                imgs[i].src = that.$imageURL + 'posting\\' + response.data.result
                imgs[i].style = '  width: auto;height: auto;max-width: 90%;max-height: 90%; '
                console.log(imgs[i].src)
              }
            }
          }, 100)
        })
        .catch(function (response) {
          console.log(response)
        })
      // for (let i = 0; i < imgs.length; i++) {
      //   console.log(imgs[i])
      // }
    },
    cancelCollect: function () {
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/removeFavorite',
        data: {
          postingId: this.$route.params.postingId
        }
      }).then(function (response) {
        // console.log(response)
        if (response.data.code === 1) {
          _this.isCollect = false
          _this.$Message.info('取消收藏!')
        }
      })
    },
    collect: function () {
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/addFavorite',
        data: {
          postingId: this.$route.params.postingId
        }
      }).then(function (response) {
        // console.log(response)
        if (response.data.code === 1) {
          _this.isCollect = true
          _this.$Message.info('添加成功!')
        }
      })
    },
    IsCollect: function () {
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/selectFavoriteByPostingId',
        data: {
          postingId: this.$route.params.postingId
        }
      }).then(function (response) {
        console.log(response)
        if (response.data.code === 1) {
          _this.isCollect = true
        }
      })
    },
    goToReply () {
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/login/success'
      }).then(function (response) {
        console.log(response)
        if (!response.data.result) {
          _this.$Message.error('请登陆再回复帖子!')
          return
        }
        _this.ModalSwitch = true
        _this.ModalContent = _this.$refs.msgDiv.innerHTML
      })
    },
    ok () {
      this.ModalContent = this.$refs.msgDiv.innerHTML
      if (this.ModalContent.trim().length === 0) {
        this.$Message.error('回复内容不能为空')
        return
      }
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/replyPosting',
        data: {
          postingId: this.$route.params.postingId,
          replyContent: this.ModalContent
        }
      }).then(function (response) {
        if (response.data.code === 1) {
          _this.$Message.info('回复成功!')
        }
        _this.$axios({
          method: 'get',
          url: '/selectReply',
          params: { postingId: _this.$route.params.postingId, page: 1 }
        }).then(function (response) {
          _this.reply = response.data.result
          _this.count = response.data.count
        })
      })
    },
    cancel () {
      this.ModalSwitch = false
    },
    goToPublish () {
      this.$router.push('/PostingEdit')
    },
    change_page (page) {
      this.currentPage = page
      // console.log(page)
      var _this = this // 临时变量
      this.$axios({
        method: 'get',
        url: '/selectReply',
        params: {
          postingId: this.$route.params.postingId,
          page: page
        }
      }).then(function (response) {
        _this.reply = response.data.result
        _this.count = response.data.count
      })
    }
  },
  mounted () {
    this.$refs.msgDiv.addEventListener('paste', this.getClipboardFiles)
    this.IsCollect()
    var _this = this // 临时变量
    this.$axios({
      method: 'get',
      url: '/selectPostingByPostingId',
      params: { postingId: this.$route.params.postingId }
    }).then(function (response) {
      _this.topicInformation = response.data.result
    })
    this.$axios({
      method: 'get',
      url: '/selectReply',
      params: { postingId: this.$route.params.postingId, page: 1 }
    }).then(function (response) {
      _this.reply = response.data.result
      _this.count = response.data.count
    })
  }
}
</script>
<style scoped>
.posting-topic {
  width: 60%;
  margin-left: 20%;
  border: #dedede solid 1px;
  font: 700 16px 'Microsoft Yahei', 'Hei', Tahoma, 'SimHei', sans-serif;
  /* background: black; */
}
.posting-menu {
  width: 60%;
  height: 4em;
  margin-left: 20%;
  margin-top: 1%;
  /* background: black; */
}
.posting-menu-button-box {
  width: 20%;
}
.posting-menu-button {
  float: left;
  width: 45%;
  margin-right: 5%;
}
.posting-menu-page {
  width: 50%;
  float: right;
}
.posting-box {
  border-right: #dedede solid 1px;
  width: 60%;
  display: table;
  margin-left: 20%;
  /* background: black; */
}
.posting-userinfo {
  /* float: left; */
  width: 20%;
  min-height: 30em;
  display: table-cell;
  background: #e5edf2;
  border-right: 1px solid #c2d5e3;
  border-bottom: 1px solid #c2d5e3;
}
.posting-nickName {
  text-align: left;
  font-weight: 700;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  border-bottom: 1px dashed #cdcdcd;
}
.posting-img {
  width: 13em;
  background: #fff;
  padding: 5px, 5px, 8px;
  background: repeat-x 0 0;
  margin-top: 1em;
}
.posting-content {
  width: 80%;
  height: auto;
  min-height: 30em;
  text-align: left;
  display: table-cell;
  /* float: left; */
  border-right: 1px solid #cdcdcd;
  border-bottom: 1px solid #cdcdcd;
}
.posting-date {
  text-align: left;
  padding-top: 1em;
  padding-left: 0.5em;
  border-bottom: 1px dashed #cdcdcd;
}
</style>
